<template>
  <div class="intelligentDiagnosis">
    <div class="cont_section">
      <div ref="radarChart" class="d3_chart radar_chart" id="radarChart"></div>
      <div class="main_desc">
        <span>综合评分</span>
        <span class="main_score" id="mainScore">74</span>
        <span id="mainDesc">
          {{mainDescList?mainDescList[0]:''}}
          <br>
          {{mainDescList?mainDescList[1]+mainDescList[2]:''}}
        </span>
      </div>
    </div>
    <div class="cont_section">
      <tab-scroll :data="tabData"></tab-scroll>
    </div>
  
  </div>
</template>
<script>
import { drawRadarChart } from "../../utils/d3/d3Chart";
import { getScoreDetail } from "../../api/intelligentDiagnosis";
import TabScroll from "@/components/tabScroll";
export default {
  components: {
    TabScroll
  },
  created() {
    this.sDtSecCode = this.$route.query.sDtSecCode;
    this.sSecName = this.$route.query.sSecName;
  },
  data() {
    return {
      mainDescList: null,
      tabData: []
    };
  },
  methods: {
    init() {
      this.initChart();
      let tabData = [
        { name: "上涨潜力", type: 1 },
        { name: "市场热度", type: 2 },
        { name: "主力强度", type: 3 },
        { name: "走势分析", type: 4 },
        { name: "价值评估", type: 5 },
      ];
      this.tabData = tabData;
    },
    initChart() {
      const chartData = [
        { axis: "上涨", value: 0 },
        { axis: "价值", value: 0 },
        { axis: "走势", value: 0 },
        { axis: "主力", value: 0 },
        { axis: "热度", value: 0 }
      ];
      drawRadarChart({
        width: this.$refs.radarChart.clientWidth,
        id: "radarChart",
        ratio: 1.05,
        data: chartData
      });
    },
    async getScoreDetail() {
      let data = await getScoreDetail([this.sDtSecCode]);
      data = data.vtConsultScore[0];
      if (data.sScoreDesc != "" && data.sScoreDesc != undefined) {
        let mainDescList = data.sScoreDesc.split("，");
        this.mainDescList = mainDescList;
      }

      const chartData = [
        { axis: "上涨", value: data.stRiseScoreDesc.iScore },
        { axis: "价值", value: data.stValueScoreDesc.iScore },
        { axis: "走势", value: data.stTrendScoreDesc.iScore },
        { axis: "主力", value: data.stMainScoreDesc.iScore },
        { axis: "热度", value: data.stMktHotScoreDesc.iScore }
      ];
      drawRadarChart({
        width: this.$refs.radarChart.clientWidth,
        id: "radarChart",
        ratio: 1.05,
        data: chartData
      });
    }
  },
  mounted() {
    this.getScoreDetail();
    this.$nextTick(() => {
      this.init();
    });
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/styles/global";

.intelligentDiagnosis {
  width: 100%;
  height: 100%;
  background: white;
  .cont_section {
    display: flex;
    .d3_chart {
      flex: 1;
      background: #fd7736;
    }
    .main_desc {
      flex: 1;
      @include center;
      flex-direction: column;
      text-align: center;
      color: #fff;
      background: #fd7736;
      span {
        font-size: 12px;
      }
      .main_score {
        font-size: 44px;
        line-height: 1.1;
      }
    }
  }
}
</style>
